<template>
  <ConTent>
    <div class="row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="addproduct">
          <div class="mb-3">
            <label for="exampleFormControlInput4" class="form-label">商品名</label>
            <input v-model="productname" type="text" class="form-control" id="exampleFormControlInput4" placeholder="商品名">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput5" class="form-label">价格</label>
            <input v-model="price" type="number" class="form-control" id="exampleFormControlInput5" placeholder="价格">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput6" class="form-label">库存数</label>
            <input v-model="inventory" type="number" class="form-control" id="exampleFormControlInput6" placeholder="库存数">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput7" class="form-label">描述</label>
            <input v-model="description" type="text" class="form-control" id="exampleFormControlInput7"
              placeholder="商品描述">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput8" class="form-label">图片链接</label>
            <input v-model="photo" type="text" class="form-control" id="exampleFormControlInput8" placeholder="商品图片链接">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput9" class="form-label">店铺名</label>
            <input v-model="shopname" type="text" class="form-control" id="exampleFormControlInput9" placeholder="店铺名">
          </div>
          <div style="color:red;">{{ error_message }}</div>
          <button type="submit" class="btn btn-primary">添加商品</button>
        </form>
      </div>
    </div>
  </ConTent>
</template>

<script>
import ConTent from '@/components/ConTent.vue';
import { ref } from 'vue';
import $ from "jquery";
import { useStore } from 'vuex';
import router from '@/router/index';
export default {
  components: {
    ConTent,
  },
  setup() {
    let productname = ref("");
    let price = ref('');
    let inventory = ref('');
    let description = ref("");
    let photo = ref("");
    let store = useStore();
    let error_message = ref("");
    let shopname = ref("");
    const addproduct = () => {
      error_message.value = "";
      if (price.value === "") error_message.value = "价格不能为空";
      else if (inventory.value === "") error_message.value = "库存不能为空";
      else {
        $.ajax({
          url: "http://8.134.248.229:10085/product/add/",
          type: "post",
          headers: { Authorization: "Bearer " + store.state.token, },
          data: {
            shopname: shopname.value,
            productname: productname.value,
            price: price.value,
            inventory: inventory.value,
            description: description.value,
            photo: photo.value,
          },
          success(resp) {
            if (resp.error_message === "success") {
              store.dispatch("getproductinfo");
              router.push({ name: "home" });
            }
            else {
              error_message.value = resp.error_message;
            }
          },

          error() {
          }
        })
      }
    }
    return { productname, price, inventory, description, photo, error_message, addproduct, shopname };
  }
}
</script>

<style scoped>
button {
  width: 100%;
}
</style>